/* eslint-disable */
import React, { useState } from 'react';
import { AntdBaseTable } from '@/base/TBaseTable';
import { Tooltip } from 'antd';
import { useTablePipeline, features } from 'ali-react-table';
import styles from './index.less';
import _ from 'lodash';

const BaseTable = (props: any) => {
  const { tableData, tableHeader = [] } = props;
  // const title = (value: any, record: any) => {
  //     return <div>{value}</div>
  // }
  // 处理表头
  const getColumns = (columsValue: any[]) => {
    const columns: any[] = [];
    columsValue.map((t) => {
      columns.push({
        name: t.name,
        align: 'left',
        code: t.field,
        width: t.width,
        render: (value: any, record: any) => {
          if (t.field === 'title') {
            return <Tooltip title={value}>{value}</Tooltip>;
          } else if (t.field === 'power' && record.tag === '时点') {
            return parseFloat((record.statisticalElectricity * 4) as any).toFixed(3);
          }
          return value || '-';
        },
      });
    });
    return columns;
  };
  // 处理表格数据
  const getDataSource = (dataSource: any[]) => {
    const newDataSource: any[] = [];
    dataSource.map((item, index) => {
      item.id = index + 1 + '';
      item = Object.assign(item, item.data);
      (item?.children || []).map((y: any, yIndex: number) => {
        y.id = `${index + 1}-${yIndex + 1}`;
        y = Object.assign(y, y.data);
        (y?.children || []).map((z: any, zIndex: number) => {
          z = Object.assign(z, z.data);
          z.id = `${index + 1}-${yIndex + 1}-${zIndex + 1}`;
          (z?.children || []).map((e: any, eIndex: number) => {
            e = Object.assign(e, e.data);
            e.id = `${index + 1}-${yIndex + 1}-${zIndex + 1}-${eIndex + 1}`;
          });
        });
      });
      newDataSource.push(item);
    });
    return newDataSource;
  };
  const [openKeys, onChangeOpenKeys] = useState(['']);
  const dataTable = _.cloneDeep(tableData);
  const dataSource = getDataSource(dataTable);
  const pipeline = useTablePipeline({ components: {} })
    .input({ dataSource: dataSource, columns: getColumns(tableHeader) })
    .primaryKey('id')
    .use(features.treeMode({ openKeys, onChangeOpenKeys }));

  // const custom_td = ({ row, colIndex, tdProps }: any) => {
  //     // row 单元格的行数据
  //     // rowIndex 单元格的行下标
  //     // column 单元格的列配置
  //     // colIndex 单元格的列下标
  //     // tdProps <td> 元素的 props
  //     const _key = Object.getOwnPropertySymbols(row)//遍历出含Symbol的属性
  //     if (colIndex === 0 && !!row.children) {
  //         const _left = row.id.toString().split('-').length - 1
  //         return (
  //             <td {...tdProps}>
  //                 <div className="ewjZVC">
  //                     {
  //                         row[_key[0]].expanded ?
  //                             <MinusSquareOutlined style={{ color: '#7A7D7F', marginLeft: `${_left * 22}px`, marginRight: '8px' }} /> :
  //                             <PlusSquareOutlined style={{ color: '#7A7D7F', marginLeft: `${_left * 22}px`, marginRight: '8px' }} />
  //                     }
  //                     {row.title}
  //                 </div>
  //             </td>
  //         )
  //     }
  //     return <td {...tdProps} />
  // }
  return (
    <div className={styles.outside}>
      <AntdBaseTable
        className={['bordered', 'dark', `${styles.custor}`].join(' ')}
        style={{
          // '--header-bgcolor': '#383C3E',
          '--header-color': 'white',
          '--row-height': '20px',
          '--header-row-height': '49px',
          '--bgcolor': '#222629',
          '--color': '#D3D4D4',
          '--cell-padding': '4px 16px',
          '--hover-bgcolor': '#222629',
        }}
        useVirtual={{ vertical: true, header: false }}
        {...pipeline.getProps()}
        defaultColumnWidth={81}
        // components={{ Cell: custom_td }}
      />
    </div>
  );
};

export default BaseTable;
